<template>
  <div>
    <basic-page-vxe
      ref="basePage"
      list-api="querySysDict"
      del-api="deleteSysDict"
      export-api="exportSysDict"
      :export-name="$route.meta.title"
      :search-form="basicData.searchForm"
      :search-handle="basicData.searchHandle"
      :columns="basicData.columns"
      :is-tree-data="true"
      :show-pagination="false"
    />
    <!--新增-->
    <el-dialog :close-on-click-modal="false" :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="600px">
      <el-form ref="dataForm" :rules="rules" :model="temp" :inline="true" label-position="right" label-width="120px" style="width: 100%">
        <el-form-item label="字典名称" prop="dictName">
          <el-input v-model="temp.dictName" style="width: 360px" placeholder="请输入" maxlength="32" clearable />
        </el-form-item>
        <el-form-item label="字典值" prop="dictValue">
          <el-input v-model="temp.dictValue" style="width: 360px" placeholder="请输入" maxlength="32" clearable />
        </el-form-item>
        <el-form-item label="上级字典" prop="parentId">
          <el-select ref="selectParentId" v-model="temp.parentId" placeholder="请选择" style="width: 100%">
            <el-option v-for="(item, index) in parentIdOptions" :key="index" :value="item.id" :label="item.title" />
          </el-select>
        </el-form-item>
        <el-form-item label="字典类型" prop="dictType">
          <el-input v-model="temp.dictType" style="width: 360px" placeholder="请输入" maxlength="32" clearable />
        </el-form-item>
        <el-form-item label="字典色值" prop="dictColor">
          <el-color-picker v-model="temp.dictColor" :predefine="predefineColors" />
        </el-form-item>
        <el-form-item label="排序" prop="dictSequence">
          <el-input-number v-model="temp.dictSequence" placeholder="请输入" style="width: 360px" maxlength="32" clearable />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { querySysDictTree, addSysDict, updateSysDict } from '@/api/admin'
import { mapGetters } from 'vuex'
export default {
  name: '',
  components: {

  },
  directives: {},
  filters: {},
  data() {
    const that = this
    return {
      basicData: {
        columns: [
          { config: { title: '字典名称', field: 'dictName' }, type: 'tree' },
          { config: { title: '字典值', field: 'dictValue' }, type: 'copy' },
          { config: { title: '字典类型', field: 'dictType' }, type: 'copy' },
          { config: { title: '排序', field: 'dictSequence', width: '80' }},
          { config: { title: '色值', field: 'dictColor', width: '80' }, type: 'render',
            render: (h, scope) => {
              return (
                <div style= {'background:' + scope.row.dictColor + ';width:60px;height:20px'}></div>
              )
            }
          },
          { config: { title: '创建日期', width: '180', field: 'createTime' }, type: 'time' },
          { config: { title: '操作', field: 'opt', width: '180' }, type: 'render',
            render: (h, scope) => {
              if ((scope.row.dictType !== 'sex' && scope.row.dictType !== 'button' && scope.row.dictType !== 'region' && scope.row.dictType !== 'workflow_type' && scope.row.dictType !== 'sys_file_storage_type' && scope.row.dictType !== 'notification' && scope.row.dictType !== 'priority' && scope.row.dictType !== 'workflow_business_type' && scope.row.dictType !== 'workflow_status') || that.curAth === 'ROLE_DEV') {
                return (
                  <div>
                    <el-button plain size='mini' type='primary' v-permission="'update'" onClick={() => this.handleUpdate(scope.row)}><i class='el-icon-edit'></i> 编辑</el-button>
                    <el-button plain size='mini' type='danger' v-permission="'delete'" onClick={() => this.$refs.basePage.handleDelete(scope.row)}><i class='el-icon-delete'></i> 删除</el-button>
                  </div>
                )
              }
            }
          }
        ],
        searchForm: [
          { type: 'Input', label: '字典名称', prop: 'dictName', width: '180px' },
          { type: 'Input', label: '字典值', prop: 'dictValue', width: '180px' },
          { type: 'Input', label: '字典类型', prop: 'dictType', width: '180px' }
        ],
        searchHandle: [
          { label: '新增', type: 'success', icon: 'el-icon-plus', permission: 'add', handle: () => { this.handleCreate() } }
        ]

      },
      parentIdOptions: [],
      orgOptions: [],
      temp: {
        id: undefined,
        parentId: ''
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '新增'
      },
      rules: {
        dictName: [{ required: true, message: '请输入字典名称！', trigger: ['blur', 'change'] }],
        dictType: [{ required: true, message: '请输入字典类型！', trigger: ['blur', 'change'] }],
        dictValue: [{ required: true, message: '请选择字典值！', trigger: 'change' }],
        parentId: [{ required: true, message: '请选择上级字典！', trigger: 'change' }]
      },
      predefineColors: [
        '#F56C6C',
        '#E6A23C',
        '#409EFF',
        '#67C23A',
        '#606266'
      ]
    }
  },
  computed: {
    ...mapGetters([
      'curAth'
    ])
  },
  created() {
  },
  mounted() {
  },
  methods: {
    // 业务逻辑
    resetTemp() {
      this.temp = {
        id: undefined,
        parentId: ''
      }
    },
    // 新增
    handleCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      querySysDictTree().then(response => {
        const info = {
          title: '根节点',
          id: '0'
        }
        this.parentIdOptions = response.data.list
        this.parentIdOptions.unshift(info)
      })
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
        this.temp.parentId = '0'
      })
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          addSysDict(this.temp).then(response => {
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '新增成功',
              type: 'success',
              duration: 2000
            })
            this.handleReset()
          })
        }
      })
    },
    // 编辑
    handleUpdate(row) {
      this.temp = Object.assign({}, row) // copy obj
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      querySysDictTree().then(response => {
        const info = {
          title: '根节点',
          id: '0'
        }
        this.parentIdOptions = response.data.list
        this.parentIdOptions.unshift(info)
      })
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.temp)
          delete tempData.children
          delete tempData.createTime
          tempData.parentId = this.temp.parentId ? this.temp.parentId : 0
          tempData.dictColor = this.temp.dictColor ? this.temp.dictColor : ''
          console.log(tempData)
          updateSysDict(tempData).then(response => {
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '编辑成功',
              type: 'success',
              duration: 2000
            })
            this.handleReset()
          })
        }
      })
    },
    // 刷新
    handleReset() {
      this.$refs.basePage.getList()
    }
  }
}
</script>

<style scoped lang="scss">
.warning{
  text-align: center;
  font-size: 20px;
}
.el-icon-info{
  font-size: 30px;
  color: orange;
}
</style>
